<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/jdbc" xmlns:v-on="http://www.w3.org/1999/xhtml">
<div th:replace="/common/header :: header"></div>
<body >

<div class="login_bac" id="app">
	<div class="reg_warp">
		<img src="images/logo.png" class="login_img">
		<div class="lg_tit clearfix">
			<i class="lg_tfl"></i>
			<p class="lg_sign">Register</p>
			<i class="lg_tfr"></i>
		</div>
		<p class="reg_tit">Register with your Mobile Phone Number , Thanks</p>
		<p class="reg_tit">e.g.Australia +6145288888；China +8613888888888</p>


		<form action="" >
			<div class="clearfix lg_ipu">
				<img src="images/a1.png" class="lg_limg">
				<input type="text" v-model="phone" class="lo_input" placeholder="Phone">
			</div>

			<div class="clearfix lg_ipu layui-form">
				<img src="images/a4.png" class="lg_limg">
				<div class="reg_pr  layui-input-inline">
					<select class="reg_select"  lay-filter="carrier">
						<option value="3" >Carrier</option>
						<option value="4">Driver</option>
						<option value="5" selected> Guest</option>
					</select>
<!--					<img src="images/a6.png" class="reg_pimg">-->
				</div>
			</div>
			<div class="clearfix lg_ipu">
				<img src="images/a2.png" class="lg_limg">
				<input type="password" v-model="password" class="lo_input" placeholder="Password" :title="password">
			</div>
			<div class="clearfix lg_ipu">
				<img src="images/a2.png" class="lg_limg">
				<input type="password" v-model="confirm_password" class="lo_input" placeholder="Confirm Password">
			</div>
			<div class="clearfix lg_ipu">

				<img src="images/a5.png" class="lg_limg">
				<input type="text" v-model="user_email" class="lo_input" placeholder="Email">
			</div>
<!--			<div class="clearfix lg_ipu">-->
<!--				<img src="images/a1.png" class="lg_limg">-->
<!--				<input type="text" v-model="avatar" class="lo_input" placeholder="RealName">-->
<!--			</div>-->
			<div class="clearfix lg_ipu" id="carrier_name" style="display: none;">
				<img src="images/a1.png" class="lg_limg">
				<input type="text" v-model="carrier_name" class="lo_input" placeholder="CarrierName">
			</div>
			<p class="reg_tis">If shows "The phone number already registered", means you can login
			using your phoneNo. from homepage directly and password is the last
			6 numbers of your PhoneNo. </p>
			<div class="clearfix">
				<input type="checkbox" class="reg_check" id="theTermsOfServiceCheckbox">
				<a href="/theTermsOfService.html" title="点击查看服务条款" target="_blank"><p class="reg_cit">I Have Read and Accepted The Terms of Service</p></a>
			</div>
			<div class="clearfix lg_wpr">
				<!--<input type="button" value="Submit" class="lg_lgoin" onclick="save()" >-->
<!--				<input type="button" value="Submit" class="lg_lgoin" v-on:click="save" >-->
<!--				<input type="reset" value="Reset" class="lg_Reg">-->
				<div class="lg_lgoin"  v-on:click="save">Register</div>
				<div class="lg_Reg">Reset</div>
			</div>
		</form>
	</div>

	<div class="reg_bot">
		<div class="clearfix lg_boa">
			<a href="#">Contact Us</a>
			<a href="#">About Us</a>
			<a href="#">Readme Before Use</a>
		</div>
		<p class="lg_boits">@Better Price Better Go</p>
	</div>
</div>


<script  th:inline="javascript">
	/*加载layui组件*/
	layui.use([ 'laydate', 'laypage', 'layer', 'form', 'carousel', 'upload',
		'element' ], function() {
		var laydate = layui.laydate //日期
		, laypage = layui.laypage //分页
		, layer = layui.layer //弹层
		, form = layui.form //表格
		, carousel = layui.carousel //轮播
		, upload = layui.upload //上传
		, element = layui.element; //元素操作
		form.on('select(carrier)', function(data){
			data.value==3 ? $("#carrier_name").show() : $("#carrier_name").hide();
			formData.role_id = data.value
		});

	});

	/*thymealef中获取接口url*/
	var save_url = [[${save_url}]];

	/*定义vue*/
	var formData = new Vue({
		el : '#app',
		data : {
			user_email:"",
			role_id:5,
			password:"",
			phone:"",
			avatar:"",
			confirm_password:'',
			carrier_name:''
		},
		methods: {
			save: function(){
				// console.log(this.password);
				// console.log($('#theTermsOfServiceCheckbox').prop('checked'));
				if(!$('#theTermsOfServiceCheckbox').prop('checked')){
					layer.alert('1、 注册页面，只有勾选“I have Read and Accepted The Terms of Service”,才能注册');
					return false;
				}


				var index = layer.msg('提交中，请稍候', {
					icon : 16,
					time : false,
					shade : 0.8
				});
				$.ajax({
					url:[[${save_url}]],
					type:"POST",
					data:{
						user_email:	formData.user_email,
						role_id:		formData.role_id,
						password:	formData.password,
						phone:		formData.phone,
						avatar:		formData.avatar,
						carrier_name:formData.carrier_name
					},
					success:function(d){
						layer.closeAll();
						// console.log("code="+d.code);
						if(d.code == 0){
							layer.confirm('注册成功,是否跳转登陆页面?', {
								btn: ['YES','NO'] //按钮
							}, function(){
								location.href = "/login.html"//登录成功，页面跳转登陆页面
							}, function(){

							});

						}else{
							layer.alert(d.msg);
						}
					},
					error:function(){
						layer.closeAll();
						layer.alert("error");
					}
				});

			}
		}

	});


</script>

</body>
</html>
